<template>
  <el-drawer :title="isDetail ? '编辑推送' : '新增推送'" :size="890" :visible="visible" @close="cancel">
    <div class="drawer__content">
      <el-form ref="ruleForm" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="推送类型" prop="pushType">
          <el-select v-model="form.pushType" show-search allow-clear :filter-option="filterOption" placeholder="请选择推送类型"
            :disabled="isDetail" style="width: 100%;">
            <el-option v-for="(item, index) in pushList" :key="index" :value="item.id" :label="item.title">
              {{ item.title }}
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 推送类型为短剧 -->
        <el-form-item v-if="form.pushType === 0" key="shortPlayId" label="选择短剧" prop="shortPlayId">
          <SelectShortPlay v-model="form.shortPlayId" :short-play-id="form.shortId" :is-detail="isDetail"
            @onSelect="onShortPlaySelect" />
        </el-form-item>
        <!-- 推送类型为h5链接 -->
        <el-form-item v-else-if="form.pushType === 1" key="pushTypeH5Value" label="H5链接" prop="pushTypeH5Value">
          <el-input v-model="form.pushTypeH5Value" placeholder="请输入H5链接" :disabled="isDetail" />
        </el-form-item>
        <!-- 语言类型：英文en,繁体中文zh-Hant -->
        <el-form-item label="语言类型" prop="language">
          <SelectLanguage v-model="form.language" value-type="object" class="short-input" style="width: 100%;" :multiple="false" @input="languageChange"/>
        </el-form-item>

        <el-form-item label="推送主题" prop="subject">
          <el-input v-model="form.subject" placeholder="请输入推送主题，建议20字符以内" :disabled="isDetail" />
        </el-form-item>

        <el-form-item label="推送内容" prop="pushContent">
          <el-input v-model="form.pushContent" type="textarea" :rows="2" placeholder="请输入推送内容，建议50字符以内"
            :disabled="isDetail" />
        </el-form-item>
        <el-form-item v-if="form.pushType === 1" label="推送图标" prop="viewPushIconLogoId">
          <ImageUploadCover v-model="form.viewPushIconLogoId" :file-size="0.1" :limit="1" :min-width-size="200"
            :max-width-size="200" :min-height-size="200" :max-height-size="200" @change="changePushIconLogoId" />
        </el-form-item>
        <el-form-item label="按钮文案" prop="iconContent">
          <el-input v-model="form.iconContent" type="textarea" :rows="2" placeholder="请输入按钮文案" />
        </el-form-item>
        <el-form-item label="推送用户" prop="pushUser" class="valite-user">
          <el-tabs v-model="activeName" type="card" @tab-click="handleTab" class="customer-tab">
            <el-tab-pane label="自定义用户" name="custom_users">
              <ul class="list-ul" :class="{'listLine': userRuleArr.length > 1 }">
                <li v-for="(item, index) in userRuleArr" :key="index">
                  <!-- 字段 -->
                  <el-select v-model="item.valuesCondition" placeholder="请选择" style="width: 24%;" filterable @change="changeField(item)" :disabled="isDetail">
                    <el-option v-for="(o, i) in ruleFieldArr" :key="i" :value="o.name" :label="o.label"/>
                  </el-select>
                  <!-- 逻辑条件 -->
                  <el-select v-model="item.logicalSymbol" placeholder="请选择" style="width: 24%;" filterable @change="changeSymbol(item)" :disabled="isDetail">
                    <el-option v-for="(o, i) in item.ruleConditionArr" :key="i" :value="o.name" :label="o.label" />
                  </el-select>
                  <!-- 逻辑值 -->
                  <!-- 设备类型 -->
                  <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable v-if="item.valuesCondition == 'equipment_type'" style="width: 32%;" :disabled="isDetail" @change="changeDevice">
                    <el-option v-for="(o, i) in clientTypeArr" :key="i" :label="o.label" :value="o.value" />
                  </el-select>
                  <!-- 国家与地区 -->
                  <SelectCountryTree ref="selectCountrys" v-model="item.valuesContent" :name="name" v-else-if="item.valuesCondition == 'countries_and_regions'" style="width: 32%;"
                    :code="code" :children-name="childrenName" :chooseparent="true" class="short-input" :child-data="optionData" 
                    :collapse-tags="false" :default-checked-keys-and-names="defaultCheckedKeysAndNames" :clearable="true"
                    :is-detail="isDetail" @data="setData" />
                  <!-- App版本 -->
                  <div v-else-if="item.valuesCondition == 'app_version'" style="width: 32%;">
                    <div v-if="item.logicalSymbol == 'between'" style="width: 100%;">
                      <!-- <el-input v-model="item.valuesContent" placeholder="请输入" style="width: 45%;" :disabled="isDetail"></el-input> -->
                      <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable style="width: 47%;" :disabled="isDetail">
                        <el-option v-for="(o, i) in appVersionArr" :key="i" :label="o" :value="o" />
                      </el-select>
                      -
                      <el-select v-model="item.valuesContentSec" placeholder="请选择" clearable filterable style="width: 47%;" :disabled="isDetail">
                        <el-option v-for="(o, i) in appVersionArr" :key="i" :label="o" :value="o" />
                      </el-select>
                      <!-- <el-input v-model="item.valuesContentSec" placeholder="请输入" style="width: 45%;" :disabled="isDetail"></el-input> -->
                    </div>
                    <div v-else style="width: 100%;">
                      <!-- <el-input v-model="item.valuesContent" placeholder="请输入" style="width: 100%;" :disabled="isDetail"></el-input> -->
                      <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable style="width: 100%;" :disabled="isDetail" collapse-tags multiple v-if="item.isMultiple" :key="1">
                        <el-option v-for="(o, i) in appVersionArr" :key="i" :label="o" :value="o" />
                      </el-select>
                      <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable style="width: 100%;" :disabled="isDetail" v-else :key="2">
                        <el-option v-for="(o, i) in appVersionArr" :key="i" :label="o" :value="o" />
                      </el-select>
                    </div>
                  </div>
                  <!-- 商业化行为用户 -->
                  <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable v-else-if="item.valuesCondition == 'commercial_behavior_user'" style="width: 32%;" :disabled="isDetail">
                    <el-option v-for="(o, i) in userTypeArr" :key="i" :label="o.label" :value="o.value" />
                  </el-select>
                  <!-- 观看短剧-特定行为 -->
                  <el-select v-model="item.valuesContent" placeholder="请选择" multiple collapse-tags clearable filterable v-else-if="item.valuesCondition == 'watch_short_play_specific_action'" style="width: 32%;" :disabled="isDetail">
                    <el-option v-for="(o, i) in shortPlayList" :key="i" :label="o.shortPlayCode" :value="o.shortPlayCode">
                      <span style="float: left">{{ o.shortPlayName }}</span>
                      <span style="float: right; color: #8492a6; font-size: 13px">{{ o.shortPlayCode }}</span>
                    </el-option>
                  </el-select>
                  <!-- 观看短剧类型-特定行为 -->
                  <el-select v-model="item.valuesContent" multiple collapse-tags filterable clearable placeholder="请先选择推送语言类型" v-else-if="item.valuesCondition == 'watch_short_play_type_specific_action'" style="width: 32%;" :disabled="isDetail" @focus="focusLanguage">
                    <el-option v-for="o in shortTvCateArr" :key="o.id" :label="o.className" :value="o.id" />
                  </el-select>
                  <!-- 是否预约新剧-特定行为 -->
                  <el-select v-model="item.valuesContent" placeholder="请选择" clearable filterable v-else-if="item.valuesCondition == 'subscribe_new_play_specific_action'" style="width: 32%;" :disabled="isDetail">
                    <el-option v-for="(o, i) in orderStatusArr" :key="i" :label="o.label" :value="o.value" />
                  </el-select>
                  <!-- 数值 -->
                  <div v-else style="width: 32%;" :class="{'unit':item.valuesCondition == 'bonus_aging'}">
                    <div v-if="item.logicalSymbol == 'between'" style="width: 100%;">
                      <el-input placeholder="" v-model="item.valuesContent" type="number" style="width: 38%;margin-right: 1%;" @keyup.native="checkNum(item)" @blur="checkType(item)" :min="0" :max="99999" :disabled="isDetail"></el-input>
                      -
                      <el-input placeholder="" v-model="item.valuesContentSec" type="number" style="width: 55%;" @keyup.native="checkNumSec(item)" @blur="checkTypeSec(item)" :min="0" :max="99999" :disabled="isDetail">
                        <template slot="append" style="padding: 10px;">{{ getValuesUnit(item.valuesUnit) }}</template>
                      </el-input>
                    </div>
                    <div v-else style="width: 100%;">
                      <el-input placeholder="数字" v-model="item.valuesContent" type="number" style="width: 100%;" @keyup.native="checkNum(item)" :min="0" :max="99999" :disabled="isDetail">
                        <template slot="append">{{ getValuesUnit(item.valuesUnit) }}</template>
                      </el-input>
                    </div>
                  </div>
                  <div class="btn-wrap" v-if="!isDetail">
                    <el-button circle type="primary" icon="el-icon-plus" @click="addUserRule(index)"/>
                    <el-button circle type="danger" icon="el-icon-delete" @click="deleteUserRule(index)" v-if="userRuleArr.length>=2"/>
                  </div>
                </li>
              </ul>
              <p class="err-tip">{{ userRuleErr }}</p>
            </el-tab-pane>
            <el-tab-pane label="预设用户群" name="preinstall_users">
              <ul class="list-ul">
                <li v-for="(item, index) in preUserRuleArr" :key="index">
                  <!-- 看预设用户分群 -->
                  <el-select v-model="item.valuesCondition" placeholder="请选择预设用户分群" clearable filterable style="width: 80%;" :disabled="isDetail" @change="changePreFile(item)">
                    <el-option v-for="(o, i) in preUserRuleList" :key="i" :label="o.label" :value="o.value" />
                  </el-select>
                  <div class="btn-wrap" v-if="!isDetail">
                    <el-button circle type="primary" icon="el-icon-plus" @click="addPreUserRule(index)"/>
                    <el-button circle type="danger" icon="el-icon-delete" @click="deletePreUserRule(index)" v-if="index != 0"/>
                  </div>
                </li>
              </ul>
              <p class="err-tip">{{ preUserRuleErr }}</p>
            </el-tab-pane>
            <el-tab-pane label="上传用户表" name="upload_users">
              <el-upload
                class="upload-demo"
                ref="upload"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" 
                :disabled="upload.isUploading || isDetail"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-exceed="handleExceed"
                :limit="1"
                accept=".xls,.xlsx,.csv"
                :file-list="fileList">
                <el-button size="small" type="primary">选择文件</el-button>
                <el-button size="small" type="warning" @click.native.stop.prevent="importTemplate">下载模板</el-button>
                <div slot="tip" class="el-upload__tip">支持excel/csv文件上传，首列填入用户id，需表头</div>
              </el-upload>
            </el-tab-pane>
          </el-tabs>
        </el-form-item>
        <el-form-item label="推送时间" prop="triggerType">
          <el-select v-model="form.triggerType" show-search allow-clear :filter-option="filterOption"
            placeholder="请选择推送时间" :disabled="isDetail" style="width: 100%;" @change="onTriggerTypeChange">
            <el-option :value="0" label="立即推送"> 立即推送 </el-option>
            <el-option :value="1" label="定时推送"> 定时推送 </el-option>
          </el-select></el-form-item>
        <!-- 定时推送 -->
        <el-form-item v-if="form.triggerType === 1" label="" prop="triggerTime" :wrapper-col="{ span: 17, offset: 5 }">
          <el-date-picker v-model="form.triggerTime" type="datetime" :picker-options="pickerOptions"
            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择推送执行时间"
            :disabled="isDetail" />
        </el-form-item>
        <el-form-item label="推送次数" prop="pushTimes">
          <el-input-number v-model="form.pushTimes" placeholder="请输入推送次数" :min="1" :precision="0"
            :disabled="isTriggerType || isDetail" style="width: 100%" />
        </el-form-item>
        <el-form-item v-if="form.pushTimes > 1" label="推送周期(时)" prop="pushCycle">
          <el-input-number v-model="form.pushCycle" placeholder="请输入推送周期" :min="1" :precision="0"
            :disabled="isDetail" style="width: 100%;" />
        </el-form-item>
        <el-form-item label="预估推送人数" prop="guessPeopleNum" class="product-item">
          <el-input v-model.trim="form.guessPeopleNum" placeholder="选择推送条件后自动核算人数" :disabled="true">
            <template slot="append"><span @click="getGuessPeopleNum">预估发送人数</span></template>
          </el-input>
        </el-form-item>
      </el-form>
      <div :style="{
    position: 'absolute',
    right: 0,
    bottom: 0,
    width: '100%',
    borderTop: '1px solid #e9e9e9',
    padding: '10px 16px',
    background: '#fff',
    textAlign: 'right',
    zIndex: 1
  }">
        <el-button type="primary" :loading="loading || confirmLoading" :disabled="isDetail" @click="submit"> 确定
        </el-button>
        <el-button :style="{ marginLeft: '8px' }" @click="cancel"> 取消 </el-button>
      </div>
    </div>

  </el-drawer>
</template>

<script>
import ImageUploadCover from '@/components/ImageUploadCover/index.vue'
import { getLanguage } from '@/utils/util'
import { listAllShortplay } from '@/api/modules/shortplay'
import { getGuessPushNum, deleteUserData, getUserTypeDataList, getApplist } from '@/api/modules/push'
import { listCountry } from '@/api/modules/config'
import SelectCountryTree from './SelectCountryTree.vue'
import SelectShortPlay from '@/components/SelectShortPlay'
import SelectLanguage from '@/components/SelectLanguage'
import { listAllClass } from '@/api/modules/class'
import { getToken } from '@/utils/auth'
const pushList = [
  {
    id: 0,
    title: '短剧'
  },
  {
    id: 1,
    title: 'H5'
  }
]
const langList = [
  {
    value: 'en',
    title: '英文'
  },
  {
    value: 'zh-Hant',
    title: '繁体中文'
  }
]
const timeList = [
  {
    id: 1,
    value: '立即发送'
  },
  {
    id: 2,
    value: '定时推送'
  }
]
export default {
  name: 'EditPush',
  components: {
    SelectCountryTree,
    SelectShortPlay,
    SelectLanguage,
    ImageUploadCover
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    confirmLoading: {
      type: Boolean,
      default: false
    },
    isDetail: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      isTriggerType: false,
      getLanguage,
      pushList,
      langList,
      timeList,
      countryIds: [],
      defaultCheckedKeysAndNames: [], // 最终要回显的勾选key数组
      shortLang: undefined,
      loading: false,
      guessLoad: false,
      shortPlayList: [], // 短剧列表
      countrylist: [], // 国家列表
      childData: [],
      selectNodeData: [], // 选中的树形节点
      shortLangCode: '', // 选择的短剧所属的语言
      code: 'id', // 树形节点的编码名称
      name: 'name', // 树形节点的名称
      childrenName: 'children', // 子节点的名称
      initForm: {
        viewPushIconLogoId: '', // 数据库存相对地址，所以用这个字段用来查看
        pushIconLogoId: '',
        iconContent: '',
        subject: '',
        pushType: undefined,
        pushTypeValue: undefined,
        shortPlayId: undefined,
        pushTypeH5Value: '',
        pushContent: '',
        language: undefined,
        languageCode: undefined,
        languageName: undefined,
        triggerType: undefined,
        chargeType: 0,
        clientType: 0,
        countryList: [],
        state: 0,
        pushCycle: undefined,
        activeTime: ['', ''],
        triggerTime: '',
        shortPlayCountryList: [],
        guessPeopleNum: ''
      },
      form: {},
      rules: {
        subject: [{ required: true, message: '请输入推送主题', trigger: 'blur' }],
        pushType: [{ required: true, message: '请选择推送类型', trigger: 'blur' }],
        shortPlayId: [{ required: true, message: '请选择推送短剧', trigger: 'change' }],
        pushTypeH5Value: [{ required: true, message: '请输入H5链接', trigger: 'blur' }],
        language: [{ required: true, message: '请选择语言', trigger: 'blur' }],
        pushContent: [{ required: true, message: '请选择推送内容', trigger: 'blur' }],
        countryList: [{ required: true, message: '请选择推送国家', trigger: ['blur', 'change'] }],
        clientType: [{ required: true, message: '请选择', trigger: 'change' }],
        triggerType: [{ required: true, message: '请选择推送时间', trigger: 'change' }],
        pushTimes: [{ required: true, message: '请输入推送次数', trigger: 'blur' }],
        pushCycle: [{ required: true, message: '请输入推送周期', trigger: 'blur' }],
        iconContent: [{ required: true, message: '请输入按钮文案', trigger: 'blur' }],
        viewPushIconLogoId: [{ required: true, message: '请上传推送图标', trigger: 'blur' }]
      },

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < new Date().getTime() - 86400000
        }
      },
      activeName: 'custom_users',
      userRuleArr: [
        { 
          userGroupCode: 'custom_users', 
          userGroupName: '自定义用户', 
          valuesCondition: '', 
          logicalSymbol: '', 
          valuesContent: '', 
          valuesContentSec: '', 
          valuesUnit: ''
        }
      ],
      preUserRuleArr: [
        {
          userGroupCode: 'preinstall_users', 
          userGroupName: '预设用户群', 
          valuesCondition: '', 
          logicalSymbol: '', 
          valuesContent: '', 
          valuesUnit: ''
        }
      ],
      userRuleErr: '',
      preUserRuleErr: '',
      fileList: [],
      ruleFieldArr: [
        {label: '设备类型', name: 'equipment_type'},
        {label: '国家与地区', name: 'countries_and_regions'},
        {label: 'App版本', name: 'app_version'},
        {label: '注册时间', name: 'register_times'},
        {label: '最近活跃时间', name: 'last_active_times'},
        {label: '商业化行为用户', name: 'commercial_behavior_user'},
        {label: 'RMF模型评分', name: 'rmf_models_coring'},
        {label: 'Bonus时效', name: 'bonus_aging'},
        {label: 'Bonus余额', name: 'bonus_balance'},
        {label: 'coins余额', name: 'coins_balance'},
        // {label: '是否触发挽留SKU', name: 'trigger_sku'},
        {label: '特定行为时间', name: 'times_specific_action'},
        {label: '观看短剧-特定行为', name: 'watch_short_play_specific_action'},
        {label: '观看时长-特定行为', name: 'watch_duration_specific_action'},
        {label: '观看短剧类型-特定行为', name: 'watch_short_play_type_specific_action'},
        {label: '是否预约新剧-特定行为', name: 'subscribe_new_play_specific_action'}
      ],
      ruleConditionArr: [
        {label: '包含', name: 'include'},
        {label: '排除', name: 'exclude'},
        {label: '大于', name: 'greater'},
        {label: '小于', name: 'less'},
        {label: '介于', name: 'between'},
        {label: '超过', name: 'exceed'},
        {label: '等于', name: 'equal'}
      ],
      clientTypeArr: [
        { value: 0, label: '全部' },
        { value: 1, label: 'Android' },
        { value: 2, label: 'IOS' }
      ],
      userTypeArr: [
        {label: '广告用户', value: 'adv_user'},
        {label: '付费用户', value: 'pay_user'},
        {label: '混合变现用户', value: 'mixture_realization_user'},
        {label: '无商业化行为用户', value: 'noncommercial_user'}
      ],
      orderStatusArr: [
        {label: '已预约', value: '1'},
        {label: '未预约', value: '0'}
      ],
      preUserRuleList: [
        {label: 'T1国家-最近7天大R用户', value: 't1countries_last7r_user'},
      ],
      appVersionArr: [],
      shortTvCateArr: [],
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/operate/push/importData',
        // url: 'http://192.168.110.25:8080/operate/push/importData'
      },
      importFileEntity: {},
      importBatchFlag: '',
      isSubmit: false
    }
  },
  computed: {
    optionData() {
      return this.tranTreeData('id', 'parentId')
    }
  },
  watch: {
    'form.clientType'(newVal, oldVal) {
      // this.getGuessPeopleNum()
    },
    'form.chargeType'(newVal, oldVal) {
      // this.getGuessPeopleNum()
    },
    'form.countryList'(newVal, oldVal) {
      // this.getGuessPeopleNum()
    },
    'form.language'(newVal, oldVal) {
      // this.getGuessPeopleNum()
    },
    'form.activeTime'(newVal, oldVal) {
      // this.getGuessPeopleNum()
    },
    visible(value) {
      if (value) {
        this.init()
        this.initPushUser()
      } else {
        this.$refs.ruleForm.resetFields()
        this.isTriggerType = false
      }
    }
  },
  created() {
    this.getShortAllList()
    this.getCountryList()
    this.getAppVersionlist(0)
  },
  methods: {
    focusLanguage () {
      // console.log(this.form.language)
      // console.log(this.form.language == '')
      if(!this.form.language){
        this.$message.error('请先选择推送语言类型');
      }
    },
    changeDevice (val) {
      this.getAppVersionlist(val)
      this.userRuleArr.forEach((item, index) => {
        if(item.valuesCondition == 'app_version'){
          this.$set(item, 'valuesContent', '')
          this.$set(item, 'valuesContentSec', '')
        }
      })
    },
    getAppVersionlist (clientType) {
      getApplist(clientType).then(response => {
        console.log(response)
        if(response.code == '200'){
          this.appVersionArr = response.rows
        }
      })
    },
    getByDate (days,months) {
      var now = new Date()
      var nYear = now.getFullYear()
      var nMonth = now.getMonth()
      var nDay = now.getDate()
      var Latest = new Date(nYear, nMonth+months, nDay+days)
      var sMonth = (Latest.getMonth() + 1)
      var sDay = Latest.getDate()
      var sHour = Latest.getHours()
      var sMin = Latest.getMinutes()
      var sec = Latest.getSeconds()
      if (sMonth < 10) {
        sMonth = '0' + sMonth
      }
      if (sDay < 10) {
        sDay = '0' + sDay
      }
      if (sHour < 10) {
        sHour = '0' + sHour
      }
      if (sMin < 10) {
        sMin = '0' + sMin
      }
      if (sec < 10) {
        sec = '0' + sec
      }
      // return Latest.getFullYear() + '-' + sMonth + '-' + sDay + ' ' + sHour + ':' + sMin + ':' + sec
      return Latest.getFullYear() + '-' + sMonth + '-' + sDay
    },
    handleExceed (files, fileList) {
      this.$message.warning('最多只能上传一个文件，如果需要上传新的文件，请先删除原有文件');
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    initPushUser () {
      this.userRuleArr = [
        { 
          userGroupCode: 'custom_users', 
          userGroupName: '自定义用户', 
          valuesCondition: '', 
          logicalSymbol: '', 
          valuesContent: '', 
          valuesContentSec: '', 
          valuesUnit: ''
        }
      ]
      this.preUserRuleArr = [
        {
          userGroupCode: 'preinstall_users', 
          userGroupName: '预设用户群', 
          valuesCondition: '', 
          logicalSymbol: '', 
          valuesContent: '', 
          valuesUnit: ''
        }
      ]
      this.fileList = []
      this.importBatchFlag = ''
      this.isSubmit = false
      this.shortTvCateArr = []
      // console.log(this.isSubmit)
    },
    setData (val, item) {
      this.userRuleArr.forEach((item, index) => {
       if(item.valuesCondition == 'countries_and_regions'){
        item.valuesContent = val
       }
      })
    },
     /** 下载模板操作 */
    importTemplate() {
      this.download('/operate/push/importPushUserTemplate', {
      }, `user_template_${new Date().getTime()}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = false
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response)
      if(response.code == 200){
        this.importBatchFlag = response.data.importBatchFlag
        // this.importFileEntity
        this.$message.success(response.data.msg)
        // console.log(this.fileList)
      }else{
        // this.$message.error(response.msg)
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
        this.$refs.upload.clearFiles()
      }
      this.upload.isUploading = false
      
      // this.upload.open = false
      // this.upload.isUploading = false
      // this.$refs.upload.clearFiles()
      // this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', { dangerouslyUseHTMLString: true })
      // this.getList()
    },
    handleRemove () {
      this.deleteUploadFile(true)
      return true
    },
    //删除上传文件
    deleteUploadFile (bool) {
      var importBatchFlag = this.importBatchFlag
      deleteUserData(importBatchFlag).then(res => {
        // console.log(res)
        if(res.code === 200){
          if(bool){
            this.$message.success(res.msg)
            this.importBatchFlag = ''
          }
        }
      })
    },
    // 选择语言
    languageChange (val) {
      // console.log(val)
      this.getShortTvCateList(val)
      this.userRuleArr.forEach((item, index) => {
        if(item.valuesCondition == 'watch_short_play_type_specific_action'){
          this.$set(item, 'valuesContent', '')
        }
      })
    },
    // 修改语言下剧目分类
    getShortTvCateList (lang) {
      listAllClass().then(response => {
        response.rows.forEach((item, index) => {
          if(item.languageCode == lang.languageCode){
            this.shortTvCateArr = item.categoryList
          }
        })
        // console.log(this.shortTvCateArr)
      })
    },
    // 修改逻辑符
    changeSymbol (item) {
      // console.log(item)
      if (item.valuesCondition == 'app_version') {
        if (item.logicalSymbol == 'include' || item.logicalSymbol == 'exclude') {
          this.$set(item, 'valuesContent', '')
          setTimeout(() => {
            this.$set(item, 'isMultiple', true)
          }, 500);
        } else if (item.logicalSymbol == 'greater' || item.logicalSymbol == 'less'){
          this.$set(item, 'valuesContent', '')
          this.$set(item, 'isMultiple', false)
        } else {
          this.$set(item, 'valuesContent', '')
          this.$set(item, 'valuesContentSec', '')
        }
      } else {
        this.$set(item, 'valuesContent', '')
        this.$set(item, 'valuesContentSec', '')
      }
    },
    changePreFile (item) {
      var count = 0
      this.preUserRuleArr.forEach((i, o) => {
        if(i.valuesCondition!='' && item.valuesCondition == i.valuesCondition){
          count+=1
        }
      })
      if(count==2){
        this.$message.error('同一条件仅可添加一条记录')
        this.$set(item, 'valuesCondition', '')
      }
    },
    //修改字段
    changeField (item) {
      var count = 0
      this.userRuleArr.forEach((i, o) => {
        if(i.valuesCondition!='' && item.valuesCondition == i.valuesCondition){
          count+=1
        }
      })
      if(count==2){
        this.$message.error('同一条件仅可添加一条记录')
        this.$set(item, 'valuesCondition', '')
      }
      this.setRuleConditionArr(item)
      this.$set(item, 'logicalSymbol', '')
      this.$set(item, 'valuesContent', '')
      this.$set(item, 'valuesContentSec', '')
    },
    setRuleConditionArr (item) {
      item.valuesUnit = ''
      //设备类型  看到短剧类型-特定行为 是否预约新剧-特定行为
      if(item.valuesCondition == 'equipment_type'|| item.valuesCondition == 'watch_short_play_type_specific_action'|| item.valuesCondition == 'subscribe_new_play_specific_action'){
        item.ruleConditionArr = [
          {label: '包含', name: 'include'}
        ]
        item.valuesUnit = ''
      }
      // 国家与地区 商业化行为用户 观看短剧-特定行为
      if(item.valuesCondition == 'countries_and_regions' || item.valuesCondition == 'commercial_behavior_user'|| item.valuesCondition == 'watch_short_play_specific_action'){
        item.ruleConditionArr = [
          {label: '包含', name: 'include'},
          {label: '排除', name: 'exclude'}
        ]
        item.valuesUnit = ''
      }
      // App版本
      if(item.valuesCondition == 'app_version'){
        item.ruleConditionArr = [
          {label: '包含', name: 'include'},
          {label: '排除', name: 'exclude'},
          {label: '大于', name: 'greater'},
          {label: '小于', name: 'less'},
          {label: '介于', name: 'between'}
        ]
        item.valuesUnit = ''
      }
      // 注册时间 最近活跃时间 特定行为时间
      if(item.valuesCondition == 'register_times'|| item.valuesCondition == 'last_active_times' || item.valuesCondition=='times_specific_action'){
        item.ruleConditionArr = [
          {label: '小于', name: 'less'},
          {label: '介于', name: 'between'},
          {label: '超过', name: 'exceed'},
          {label: '等于', name: 'equal'}
        ]
        item.valuesUnit = 'days'
      }
      // RMF模型评分
      if(item.valuesCondition == 'rmf_models_coring'){
        item.ruleConditionArr = [
          {label: '大于', name: 'greater'},
          {label: '小于', name: 'less'},
          {label: '等于', name: 'equal'},
          {label: '介于', name: 'between'}
        ]
        item.valuesUnit = 'minutes'
      }
      // Bonus时效
      if(item.valuesCondition == 'bonus_aging'){
        item.ruleConditionArr = [
          {label: '大于', name: 'greater'},
          {label: '小于', name: 'less'},
          {label: '介于', name: 'between'}
        ]
        item.valuesUnit = 'hours'
      }
      // Bonus余额  coins余额
      if(item.valuesCondition == 'bonus_balance'||item.valuesCondition == 'coins_balance'){
        item.ruleConditionArr = [
          {label: '大于', name: 'greater'},
          {label: '小于', name: 'less'},
          {label: '介于', name: 'between'}
        ]
        item.valuesUnit = ''
      }
      // 观看时长-特定行为
      if(item.valuesCondition == 'watch_duration_specific_action'){
        item.ruleConditionArr = [
          {label: '大于', name: 'greater'},
          {label: '小于', name: 'less'},
          {label: '介于', name: 'between'}
        ]
        item.valuesUnit = 'seconds'
      }
    },
    // 修改单位
    getValuesUnit (val) {
      if(val=='days'){
        return '天'
      }else if(val=='hours'){
        return '小时'
      }else if(val=='minutes'){
        return '分'
      }else if(val=='seconds'){
        return '秒'
      }else{
        return ''
      }
    },
    checkType (item) {
      // console.log(item)
      if(item.valuesContentSec&&item.valuesContent > item.valuesContentSec){
        this.$message.error('值不能大于最大值')
        this.$set(item, 'valuesContent', '')
      }
    },
    checkTypeSec (item) {
      // console.log(item)
      if(item.valuesContent&&item.valuesContent > item.valuesContentSec){
        this.$message.error('值不能小于最小值')
        this.$set(item, 'valuesContentSec', '')
      }
    },
    checkNum (item) {
      const regex = /^[1-9]\d*$|^0$/
      var bool = regex.test(item.valuesContent)
      console.log(bool)
      if(!bool){
        this.$message.error('请输入>=0的正整数')
        this.$set(item, 'valuesContent', '')
      }
      // $event.target.value = $event.target.value.replace(/[^0-9\.]/g,'')
    },
    checkNumSec (item) {
      const regex = /^[1-9]\d*$|^0$/
      var bool = regex.test(item.valuesContentSec)
      if(!bool){
        this.$message.error('请输入>=0的正整数')
        this.$set(item, 'valuesContentSec', '')
      }
      // $event.target.value = $event.target.value.replace(/[^0-9\.]/g,'')
    },
    handleTab () {
    },
    addUserRule (index) {
      var errmsg = ''
      if(this.userRuleArr[index].valuesCondition === '') {
        errmsg+='条件字段不能为空'
        this.userRuleErr = errmsg
      }else if(this.userRuleArr[index].logicalSymbol === ''){
        errmsg+='逻辑符不能为空'
        this.userRuleErr = errmsg
      } else if (this.userRuleArr[index].valuesContent === ''){
        errmsg+='值不能为空'
        this.userRuleErr = errmsg
      }else{
        errmsg = ''
        this.userRuleErr = errmsg
        this.userRuleArr.push({
          userGroupCode: 'custom_users', 
          userGroupName: '自定义用户', 
          valuesCondition: '', 
          logicalSymbol: '', 
          valuesContent: '', 
          valuesContentSec: '', 
          valuesUnit: ''
        })
      }
    },
    deleteUserRule (i) {
      this.userRuleErr = ''
      this.userRuleArr.splice(i, 1)
    },
    addPreUserRule (index) {
      // console.log(this.preUserRuleArr)
      var errmsg = ''
      if(this.preUserRuleArr[index].valuesCondition === '') {
        errmsg+='条件字段不能为空'
        this.preUserRuleErr = errmsg
      }else{
        errmsg = ''
        this.preUserRuleErr = errmsg
        this.preUserRuleArr.push({userGroupCode: 'preinstall_users', userGroupName: '预设用户群', valuesCondition: '', logicalSymbol: '', valuesContent: '', valuesUnit: ''})
      }
    },
    deletePreUserRule (i) {
      this.preUserRuleArr.splice(i, 1)
    },
    onTriggerTypeChange(value) {
      if (value === 0) {
        // 立即推送
        this.form.pushTimes = '1'
        this.isTriggerType = true
      } else {
        this.isTriggerType = false
      }
    },
    changePushIconLogoId(url) {
      this.form.pushIconLogoId = url
      this.form.viewPushIconLogoId = `https://static.shorttv.live${url}`
    },
    init() {
      this.form = { ...this.initForm, isCopy: 0 }
      // 编辑
      if (this.record.id) {
        this.form = { ...this.initForm, ...this.record }
        if (this.form.triggerType === 0) {
          this.isTriggerType = true
        } else {
          this.isTriggerType = false
        }
        this.form.viewPushIconLogoId = `https://static.shorttv.live${this.record.pushIconLogoId}`
        this.form.language = { languageCode: this.form.languageCode, languageName: this.form.languageName }
        this.countryIds = this.form.countryList
        if (this.record.startActiveTime) {
          this.form.activeTime = [this.record.startActiveTime, this.record.endActiveTime]
        } else {
          this.form.activeTime = ['', '']
        }
        if (this.form.pushType === 0) {
          this.form.pushTypeValue = this.form.pushTypeValue.split('(')[0]
          console.log(this.form.pushTypeValue)
          const shortData = this.shortPlayList.find((item) => this.form.pushTypeValue === item.shortPlayCode)
          this.form.shortPlayId = this.form.pushTypeValue
          if (shortData) {
            this.shortLangCode = shortData.languageCode
          }
        } else if (this.form.pushType === 1) {
          this.form.pushTypeH5Value = this.form.pushTypeValue
        }
        if (typeof (this.form.countryList) === 'string') {
          const countryArr = JSON.parse(this.form.countryList)
          const ccountryArray = []
          this.countrylist.forEach((item, index) => {
            countryArr.map((v, i) => {
              if (item.countryCode == v && v !== '') {
                const tempArray = {
                  parentId: item.parentId,
                  id: item.id,
                  name: item.name,
                  countryCode: item.countryCode
                }
                ccountryArray.push(tempArray)
              }
            })
          })
          this.defaultCheckedKeysAndNames = ccountryArray
        }
        // console.log(this.form)
        //推送用户回填
        let params = {
          pushId: this.record.id,
          pushUserType: this.record.pushUserType
        }
        this.activeName = this.record.pushUserType
        this.languageChange(this.form.language)
        getUserTypeDataList(params).then(res => {
          // console.log(res)
          if(res.code == 200){
            if(res.data.pushUserModelEntities){
              if(this.activeName == 'custom_users'){
                this.userRuleArr=res.data.pushUserModelEntities
                // console.log(this.userRuleArr)
                for(let i=0; i<this.userRuleArr.length; i++){
                  this.setRuleConditionArr(this.userRuleArr[i])
                  if(this.userRuleArr[i].valuesCondition == 'equipment_type'){
                    // this.userRuleArr[i].valuesContent = parseInt(this.userRuleArr[i].valuesContent)
                    this.$set(this.userRuleArr[i], 'valuesContent', parseInt(this.userRuleArr[i].valuesContent))
                  }
                  if(this.userRuleArr[i].valuesCondition == 'app_version'){
                    if(this.userRuleArr[i].logicalSymbol == 'include' || this.userRuleArr[i].logicalSymbol == 'exclude'){
                      this.userRuleArr[i].valuesContent = this.userRuleArr[i].valuesContent.split(",")
                      // console.log(this.userRuleArr[i].valuesContent)
                      this.$set(this.userRuleArr[i], 'isMultiple', true)
                    } else {
                      this.$set(this.userRuleArr[i], 'isMultiple', false)
                    }
                  }
                  if(this.userRuleArr[i].logicalSymbol == 'between'){
                    var valuesContent = this.userRuleArr[i].valuesContent.split(",")
                    // this.userRuleArr[i].valuesContent = valuesContent[0]
                    // this.userRuleArr[i].valuesContentSec = valuesContent[1]
                    this.$set(this.userRuleArr[i], 'valuesContent', valuesContent[0])
                    this.$set(this.userRuleArr[i], 'valuesContentSec', valuesContent[1])
                  }
                  if(this.userRuleArr[i].valuesCondition == 'watch_short_play_specific_action'){
                    this.userRuleArr[i].valuesContent = this.userRuleArr[i].valuesContent.split(",")
                  }
                  if(this.userRuleArr[i].valuesCondition == 'watch_short_play_type_specific_action'){
                    this.userRuleArr[i].valuesContent = this.userRuleArr[i].valuesContent.split(",").map((item, inxe)=>{
                      return parseInt(item)
                    })
                  }
                }
              }
              if(this.activeName == 'preinstall_users'){
                this.preUserRuleArr = res.data.pushUserModelEntities
              }
            }
            if (this.activeName == 'upload_users') {
              // console.log(this.isDetail)
              if (this.isDetail) {
                this.fileList = [{name: '上传用户数据模板', url: ''}]
                this.importBatchFlag = res.data.importBatchFlag
              } else {
                this.fileList = []
                this.importBatchFlag = ''
              }
            }
          }
        })
      }
    },
    /** 获取国家列表 */
    getCountryList() {
      listCountry().then(response => {
        this.countrylist = response.rows
      })
    },
    // 短剧列表封装
    async getShortAllList() {
      try {
        const response = await listAllShortplay()
        const shortPlayList = response.rows.map((item, index) => ({
          id: item.id,
          shortPlayName: item.shortPlayName,
          shortPlayCode: item.shortPlayCode,
          languageCode: item.languageCode
        }))
        this.shortPlayList = shortPlayList
        return shortPlayList
      } catch (error) {
        return []
      }
    },
    getData(val) { // 将选中的节点赋值到此变量
      this.selectNodeData = val
      this.form.countryList = this.selectNodeData
    },
    tranTreeData(childName, parentName) { // 模拟将服务器数据转tree数据
      const cloneData = JSON.parse(JSON.stringify(this.countrylist)) // 对源数据深度克隆
      return cloneData.filter(father => { // 循环所有项，并添加children属性
        const branchArr = cloneData.filter(child => father[childName] == child[parentName]) // 返回每一项的子级数组
        branchArr.length > 0 ? father.children = branchArr : '' // 给父级添加一个children属性，并赋值
        return father[parentName] == 0 // 返回第一层
      })
    },
    /** 时间选择操作方法 */
    onRangeChange(e) {
      if (e) {
        this.form.startActiveTime = e[0]
        this.form.endActiveTime = e[1]
      } else {
        this.form.startActiveTime = ''
        this.form.endActiveTime = ''
      }
    },
    onDateChange(e) {
      this.form.triggerTime = e
    },
    /** 短剧选择操作 */
    onShortPlaySelect(value) {
      this.form.shortPlayId = value.shortPlayCode
      this.shortLangCode = value.languageCode
    },
    getGuessPeopleNum() {
      // console.log(this.guessLoad)
      if(this.isDetail){
        return
      }
      if (!this.guessLoad) {
        let pushUserModelEntities = []
        if (this.activeName == 'custom_users') {
          pushUserModelEntities = this.userRuleArr.map((item,index) => {
            let valuesContent = item.valuesContent
            if(typeof(valuesContent) == 'object'&&valuesContent.length > 0){
              valuesContent = item.valuesContent.join(",")
            }
            if(item.valuesContentSec != '' && item.valuesContentSec != undefined){
              valuesContent = item.valuesContent + ',' + item.valuesContentSec
            }
            return {
              userGroupCode: 'custom_users',
              userGroupName: '自定义用户',
              valuesCondition: item.valuesCondition,
              logicalSymbol: item.logicalSymbol,
              valuesContent: valuesContent,
              valuesUnit: item.valuesUnit
            }
          })
        } else if (this.activeName == 'preinstall_users'){
          pushUserModelEntities = this.preUserRuleArr.map((item,index) => {
            return {
              userGroupCode: 'preinstall_users',
              userGroupName: '预设用户群',
              valuesCondition: item.valuesCondition,
              logicalSymbol: '',
              valuesContent: '',
              valuesUnit: ''
            }
          })
        } else {
          pushUserModelEntities = []
        }
        var formParams;
        if (this.form.language && this.form.language.languageCode) {
          formParams = {
            // language: this.form.language,
            languageCode: this.form.language.languageCode,
            languageName: this.form.language.languageName,
          }
        } else {
          formParams = {
            // language: this.form.language,
            languageCode: 'en',
            languageName: '英语',
          }
        }
        let params = {
          pushEntity: formParams,
          // pushEntity: this.form,
          pushUserType: this.activeName,
          pushUserModelEntities: pushUserModelEntities,
          // importFileEntity: this.importFileEntity,
          importBatchFlag: this.importBatchFlag
        }
        this.guessLoad = true
        this.form.guessPeopleNum = '估算中…'
        console.log(params)
        getGuessPushNum(params).then(res => {
          console.log(res.data, 'res');
          this.form.guessPeopleNum = res.data
        }).finally(() => {
          this.guessLoad = false
        })
      }
    },
    /** 确定按钮操作 */
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.form.languageCode = this.form.language.languageCode
          this.form.languageName = this.form.language.languageName
          // console.log(this.form, '---form')
          if (!this.form.triggerTime && this.form.triggerType === 1) {
            this.$message.error('请选择推送时间')
            return false
          } else if (this.form.triggerType === 0) {
            this.triggerTime = ''
          }
          if (this.form.pushType === 0) {
            this.form.pushTypeValue = this.form.shortPlayId
            // if (this.form.language !== this.shortLangCode) {
            //   this.$message.error(`该剧属于${getLanguage(this.shortLangCode)}语言区，请选择${getLanguage(this.form.language)}语言的剧`)
            //   return false
            // } else {
            //   this.form.pushTypeValue = this.form.shortPlayId
            // }
          } else if (this.form.pushType === 1) {
            this.form.pushTypeValue = this.form.pushTypeH5Value
          }
          
          let pushUserModelEntities = []
          let isNull = false
          if (this.activeName == 'custom_users') {
            pushUserModelEntities = this.userRuleArr.map((item,index) => {
              // console.log(item.valuesCondition=== ''||item.logicalSymbol===''||item.valuesContent==='')
              if(item.valuesCondition=== ''||item.logicalSymbol===''||item.valuesContent===''){
                isNull = true
              }
              let valuesContent = item.valuesContent
              // console.log(item.valuesContent)
              // console.log(item, typeof(valuesContent))
              if(typeof(valuesContent) == 'object'&&valuesContent.length > 0){
                valuesContent = item.valuesContent.join(",")
              }
              if(item.valuesContentSec != '' && item.valuesContentSec != undefined){
                valuesContent = item.valuesContent + ',' + item.valuesContentSec
              }
              return {
                userGroupCode: 'custom_users',
                userGroupName: '自定义用户',
                valuesCondition: item.valuesCondition,
                logicalSymbol: item.logicalSymbol,
                valuesContent: valuesContent,
                valuesUnit: item.valuesUnit
              }
            })
            if (isNull) {
              this.$message.error('自定义用户所选条件不能存在空值')
              return
            }
          } else if (this.activeName == 'preinstall_users'){
            pushUserModelEntities = this.preUserRuleArr.map((item,index) => {
              if(item.valuesCondition=== ''){
                isNull = true
              }
              return {
                userGroupCode: 'preinstall_users',
                userGroupName: '预设用户群',
                valuesCondition: item.valuesCondition,
                logicalSymbol: '',
                valuesContent: '',
                valuesUnit: ''
              }
            })
            if (isNull) {
              this.$message.error('预设用户群所选条件不能存在空值')
              return
            }
          } else {
            pushUserModelEntities = []
          }
          var formParams = {
            pushType: this.form.pushType,
            shortPlayId: this.form.shortPlayId,
            pushTypeH5Value: this.form.pushTypeH5Value,
            pushTypeValue: this.form.pushTypeValue,
            language: this.form.language,
            languageCode: this.form.languageCode,
            languageName: this.form.languageName,
            subject: this.form.subject,
            pushContent: this.form.pushContent,
            viewPushIconLogoId: this.form.viewPushIconLogoId,
            iconContent: this.form.iconContent,
            // clientType: this.form.clientType,
            // countryList: this.form.countryList,
            // chargeType: this.form.chargeType,
            // activeTime: this.form.activeTime,
            triggerType: this.form.triggerType,
            triggerTime: this.form.triggerTime,
            pushTimes: this.form.pushTimes,
            pushCycle: this.form.pushCycle,
            guessPeopleNum: typeof(this.form.guessPeopleNum) === 'string' ? 0 : this.form.guessPeopleNum,
            pushIconLogoId: this.form.pushIconLogoId,
            shortPlayCountryList: [],
            state: this.form.state ? this.form.state : 0,
            isCopy: this.form.isCopy ? this.form.isCopy : 0,
            id: this.$parent.isType == 'edit' ? this.form.id : undefined
          }
          let params = {
            pushEntity: formParams,
            // pushEntity: this.form,
            pushUserType: this.activeName,
            pushUserModelEntities: pushUserModelEntities,
            // importFileEntity: this.importFileEntity,
            importBatchFlag: this.importBatchFlag
          }
          this.loading = true
          this.isSubmit = true
          try { 
            console.log(params)
            this.$emit('confirm', params)
            this.loading = false
          } catch (err) {
            this.$emit('confirm', params)
          }
        } else {
          return false
        }
      })
    },
    cancel() {
      if (this.importBatchFlag != '' && !this.isDetail && !this.isSubmit) {
        this.$message.error('请先删除已上传文件')
      } else {
        // this.form.countryList = []
        this.defaultCheckedKeysAndNames = []
        // this.$refs.selectCountry.filterText = ''
        this.form = {}
        this.resetForm('ruleForm')
        this.$emit('onClose')
        this.$refs.ruleForm.resetFields()
        // this.$refs.ruleForm.clearValidate()
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    dateOptions(time) {
      return time.getTime() > Date.now() - 8.64e6
    }
  }
}
</script>
<style>
.list-ul .el-input__inner{
  width: 100%; 
  overflow: hidden;
  white-space: nowrap; 
  text-overflow: ellipsis;
}
.customer-tab .el-tabs__content{
  overflow: unset;
}
.customer-tab .el-input-group__append, .customer-tab .el-input-group__prepend{
  width: 34px;
  box-sizing: border-box;
  padding: 0 10px;
}
.customer-tab .unit .el-input-group__append, .customer-tab .unit .el-input-group__prepend{
  padding: 0 5px;
}

</style>
<style scoped lang="scss">
.form-content {
  padding: 20px;
}

.form-btn {
  display: flex;
  justify-content: center;
}

.bonus-text {
  position: absolute;
  right: 16px;
  color: #f5222d;
  z-index: 5;
}

.drawer__content {
  padding: 20px;
  padding-bottom: 60px;
}
.list-ul{
  list-style: none;
  position: relative;
  padding: 0;
  li{
    display: flex;
    justify-content: space-around;
    margin-bottom: 5px;
    .el-button + .el-button{
      margin-left: 3px;
    }
    .btn-wrap{
      min-width: 74px;
    }
  }
}
.listLine::before{
  content: '';
  border: 1px solid #ddd;
  border-radius: 3px;
  position: absolute;
  left: -17px;
  top: 0;
  height: 100%;
  width: 6px;
  border-right: none
}
.listLine::after{
  content: 'AND';
  width: 36px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: #93A5DD;
  background: #DEE7F3;
  border-radius: 10px;
  position: absolute;
  left: -35px;
  top: 50%;
  margin-top: -10px;
  font-size: 11px;
}
.err-tip{
  color: #ff4949;
  font-size: 12px;
}
.valite-user{
  position: relative;
}
.valite-user::before{
  content: "*";
  color: #ff4949;
  margin-right: 4px;
  position:absolute;
  left: 42px;
  top: 10px;
}
</style>
